<!--
 * @Description: 侧边栏布局组件，被渲染的主要组件在menu.js里
 * @Author: youzi
 * @Date: 2019-07-31 09:09
 * @LastEditTime: 2020-08-27 09:23:34
 * @LastEditors: youzi
 * @todo: 相对位置定位问题待解决。!done
 -->
<template>
  <!-- <a-layout-sider>下属属性，默认256px宽度 -->
  <a-layout-sider
    :class="[theme, 'sider', isMobile ? null : 'shadow', fixSiderbar ? 'ant-fixed-sidemenu' : null]"
    :width="siderWidth"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <!-- <div :class="['logo', theme]">
      <router-link to="/">
        <img src="static/img/company-title.png" alt="" style="cursor: pointer;" />
        <h1 class="animated fadeIn">{{ companyName }}</h1>
        <h2 class="animated fadeIn">{{ companyNameEn }}</h2>
      </router-link>
    </div> -->
    <i-menu
      style="font-size: 10px !important;"
      class="sider-menu"
      :theme="theme"
      :collapsed="collapsed"
      :menuData="menuData"
      @select="onSelect"
    />
  </a-layout-sider>
</template>

<script>
import IMenu from './menu';
import { mapState } from 'vuex';
export default {
  name: 'SiderMenu',
  components: { IMenu },
  data() {
    return {
      siderWidth: (190 / 1366) * window.screen.width
    };
  },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  computed: {
    ...mapState({
      isMobile: state => state.setting.isMobile,
      systemName: state => state.setting.systemName,
      fixSiderbar: state => state.setting.fixSiderbar,
      companyName: state => state.setting.companyName,
      companyNameEn: state => state.setting.companyNameEn
    })
  },
  methods: {
    onSelect(obj) {
      this.$emit('menuSelect', obj);
    }
  }
};
</script>

<style lang="less" scoped>
@baseFontSize: 16; /* 注意这里是1366*768屏幕下的基本字体大小，我使用相对rem来写样式 */
.shadow {
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.35);
}
.sider {
  z-index: 16;
  position: relative;
  overflow-x: hidden;
  // padding-top: 5%;
  &.light {
    background-color: #fff;
  }
  &.dark {
    background-color: #393e46;
  }
  &.ant-fixed-sidemenu {
    position: fixed;
    overflow-y: auto;
    height: 100%;
  }
  &.ant-fixed-sidemenu::-webkit-scrollbar {
    display: none;
  }
  .sider-menu {
    margin-top: (54 / @baseFontSize) * 1rem;
  }
  .logo {
    height: (54 / @baseFontSize) * 1rem;
    position: relative;
    // line-height: 59px;
    // padding-left: 24px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    overflow: hidden;
    display: flex;
    justify-content: center;
    &.light {
      background-color: #fff;
      border-bottom: 1px solid #f8f8f8;
    }
    &.dark {
      background-color: #4675e7;
      h1 {
        color: #fff;
      }
    }
    img {
      width: (123 / @baseFontSize) * 1rem;
      display: block;
      padding-top: (13 / @baseFontSize) * 1rem;
      // vertical-align: middle;
    }
  }
}
</style>
